<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
   
    </style>
</head>

<body style="height:2000px ;">
    <input type="button" value="走起" id="btnGo">
    <div id="ball"></div>
    <script>
        let btnGo = document.getElementById('btnGo')
        let ball = document.getElementById('ball')

        class Ball{

            constructor(obj){
                let defaultObj = {
                    //设置一个默认的样式,如果有就不用默认的
                    parentDom:document.body,
                    dom:undefined,
                    size:30,
                    color:'pink',
                    directionLeft:1,
                    directionTop:1,
                    left:100,
                    top:100,
                    step:1,
                    timespace:5
                }
                //属性(球球的特征)
                for(let key in defaultObj){
                    this[key]=obj[key]?obj[key]:defaultObj[key]
                }
                this.render()
                this.go()
            }
            //动态创建html和css
            render(){
                this.dom =document.createElement('div')
                this.dom.style.cssText=`
                position:absolute;
                left:${this.left}px;
                top:${this.top}px;
                width:${this.size}px;
                height:${this.size}px;
                border-radius:50%;
                background-color:${this.color};
                `
                this.parentDom.appendChild(this.dom)
            }
            go() {
            setInterval( ()=> {

                this.left +=this. directionLeft * this.step
                this.top += this.directionTop *this. step

                //2.边界处理
                if (this.left <= 0 + scrollLeft) {

                    this. directionLeft = 1
                    this.left = 0 +scrollLeft
                } else if (this.left >= clientWidth - this.size + scrollLeft) {

                    this.directionLeft = -1
                    this.left = clientWidth - this.size + scrollLeft
                }
                if (this.top <= 0 + scrollTop) {

                    this.directionTop = 1
                    this.top = 0 + scrollTop
                } else if (this.top >= clientHeight - this.size + scrollTop) {

                    this.directionTop = -1
                    this.top = clientHeight - this.size + scrollTop
                }

                this.dom.style.left = this.left+'px'
                this.dom.style.top = this.top+'px'
            },this. timespace)}

        }


        let clientWidth
        let clientHeight
        let scrollTop
        let scrollLeft
        window.onload = function () {
            //1.初始化数据
            init();
            //点击让小球动起来
            btnGo.onclick = function () {
                for (let i = 0; i <10; i++) {

                    let size = parseInt(Math.random() * 90 + 10);
                    let color = getColor();
                    let left = parseInt(Math.random() * 900 + 100);
                    let top = parseInt(Math.random() * 500 + 10);
                    let directionLeft = parseInt(Math.random() * 2) == 0 ? -1 : 1;
                    let directionTop = parseInt(Math.random() * 2) == 0 ? -1 : 1;
                    let step = parseInt(Math.random() * 9 + 1);
                    let timespace = parseInt(Math.random() * 90 + 10);

                    new Ball({size,color,directionLeft,directionTop,left,top,step,timespace});
                }
            }
            //窗口大小改变时
            window.onresize = changeWH;
            //页面滚动时
            window.onscroll = changeScroll;
        }
      
        function init() {         
            changeWH() 
            changeScroll()
        }
        function changeWH() {
            clientWidth = document.documentElement.clientWidth || document.body.clientWidth
            clientHeight = document.documentElement.clientHeight || document.body, clientHeight
        }
        function changeScroll() {
            scrollTop = document.documentElement.scrollTop || document.body.scrollTop
            scrollLeft = document.documentElement.scrollLeft || document.body.scrollLeft
        }
           //获取随机的颜色值
    function getColor() {
            var str = "#";
            for (var i = 0; i < 6; i++) {
                //1、获取0-16（不包括）的数
                var temp = parseInt(Math.random() * 16).toString(16);
                //2、拼接
                str += temp;
            }
            return str;
        }

  
    </script>

</body>

</html>